import { defineComponent } from "vue"
import styles from "./CardView.module.less"

export default defineComponent({
	name: "CardView",
	setup() {
		return () => (
			<div class="card-container">
				<h1 class="row-title">第一组</h1>
				<div class="row">
					<Chen-Card type="default" imgSrc="/java.png">
						{{
							default: () => "Java高薪工程师培养计划讲解",
							foo: () => (
								<div class={styles["footer-java"]}>
									<div class={styles["level"]}>3步骤 · 3门课</div>
									<div class={styles["level"]}>10982收藏</div>
								</div>
							),
						}}
					</Chen-Card>
					<Chen-Card type="default" imgSrc="/electron.png">
						{{
							default: () => "Google工程师深度讲解，由浅入深掌握",
							foo: () => (
								<div class={styles["footer-go"]}>
									<div class={styles["level"]}>中级 · 5225人报名</div>
									<div class={styles.price}>￥390.00</div>
								</div>
							),
						}}
					</Chen-Card>
				</div>
				<h1 class="row-title">第二组宽度自定义</h1>
				<div class="row">
					<Chen-Card imgSrc="/jiagou.png" width={350}>
						{{
							default: () => "架路吃透前端架构，伴随前端工程师的你一路成长，高效充分准备起航",
							foo: () => (
								<div class={styles["footer-java"]}>
									<div class={styles["level"]}>3步骤 · 3门课</div>
									<div class={styles["level"]}>10982收藏</div>
								</div>
							),
						}}
					</Chen-Card>
				</div>
			</div>
		)
	},
})
